<!--

更多设置

 -->
<template>
  <v-dialog v-model="dialog" max-width="600px" persistent >
        <v-card height="500px" style="overflow: hidden;">
            <v-toolbar flat color="commonColor_one" dark height="60px">
              <v-toolbar-title>设置</v-toolbar-title>
              <v-divider
                class="mx-4"
                inset
                vertical
              ></v-divider>
              <v-spacer></v-spacer>

              <v-tooltip bottom>
                <template v-slot:activator="{ on }">
                  <v-btn  dark class="ma-auto mr-2" v-on="on" icon @click="closeFn">
                    <v-icon color="white">mdi-close</v-icon>
                  </v-btn>
                </template>
                <span>关闭</span>
              </v-tooltip>
              <v-tooltip bottom>
                <template v-slot:activator="{ on }">
                  <v-btn  dark class="ma-auto" v-on="on" icon @click="saveFn">
                    <v-icon color="white">mdi-check</v-icon>
                  </v-btn>
                </template>
                <span>保存</span>
              </v-tooltip>
            </v-toolbar>
            <v-tabs vertical color="commonColor_one">
              <v-tab>
                <v-icon left>mdi-tools</v-icon>
                工具设置
              </v-tab >
               <v-tab>
                 <v-icon left>mdi-finance</v-icon>
                 <div class="badgeDiv" v-show="latestVersion"></div>
                 版本更新
               </v-tab>


              <v-tab>
                <v-icon left>mdi-state-machine</v-icon>
                软件说明
              </v-tab>
              <v-tab-item>
                <v-card flat style="height:440px">
                    <v-col cols="12" col="12" class="pa-0 ma-0 px-3 pt-2 pb-3">
                        <v-checkbox
                          v-model="settingTools"
                          hide-details
                          color="#d344f6"
                          label="在主页显示"
                        ></v-checkbox>
                    </v-col>
                    <v-divider class="mx-4" inset></v-divider>
                    <v-row class="ma-0 pa-0">
                      <v-col cols="12" sm="4" md="4" class="py-0 my-0">
                        <v-checkbox
                          v-model="settingToolsType.scrollUp"
                          label="置顶按钮"
                          color="indigo"
                          value=""
                          hide-details
                        ></v-checkbox>
                        <v-checkbox
                          v-model="settingToolsType.scrollDown"
                          label="置底按钮"
                          color="indigo darken-3"
                          value=""
                          hide-details
                        ></v-checkbox>
                      </v-col>
                      <v-col cols="12" sm="4" md="4" class="py-0 my-0">
                        <v-checkbox
                          v-model="settingToolsType.cutPicture"
                          label="截屏按钮"
                          color="red darken-3"
                          value=""
                          hide-details
                        ></v-checkbox>
                        <v-checkbox
                          v-model="settingToolsType.hide"
                          label="隐藏按钮"
                          color="red"
                          value=""
                          hide-details
                        ></v-checkbox>
                      </v-col>
                    </v-row>
                </v-card>
              </v-tab-item>
              <v-tab-item>
                <v-card flat style="height:440px;" v-if="latestVersion">
                  <v-card-text class="mt-10" >
                    <p style="display: flex;">
                      <v-spacer></v-spacer>
                      <span>当前版本：{{ oldVersion }}</span>
                      <v-spacer></v-spacer>
                    </p>

                    <p style="display: flex;margin-top: 40px;">
                      <v-spacer></v-spacer>
                      <span>新版本：{{ newVersion }}</span>
                      <v-spacer></v-spacer>
                    </p>
                    <p style="display: flex;margin-top: 40px;">
                      <v-spacer></v-spacer>
                      <v-btn color="blue" class="ma-auto" dark rounded width="200" @click="uploadFN" style="text-indent:20px;letter-spacing:20px">更新</v-btn>
                      <v-spacer></v-spacer>
                    </p>
                  </v-card-text>
                </v-card>
                <v-card flat style="height:440px;" v-else>
                  <v-card-text class="mt-10" >
                    <p style="display: flex;">
                      <v-spacer></v-spacer>
                      <span>当前版本：{{ oldVersion }}（最新版本）</span>
                      <v-spacer></v-spacer>
                    </p>
                   </v-card-text>
                </v-card>
              </v-tab-item>
              <v-tab-item>
                <v-card flat style="height:440px;overflow-y: scroll;">
                  <v-card-text>
                    <p>
                      《天住管家》软件由“寰宇极光（天津）物联科技有限公司”为“天津住宅集团”设计并制作。
                      该软件分为六大部分：主页、组织架构、党群党建、财务模块、园区模块、系统设置。
                    </p>
                    <p style="font-weight: 700;">
                      一、主页：主要展示某一园区的财务、物业汇总信息，以及面向园区的党建文章和公告通知
                    </p>
                    <p style="font-weight: 700;">
                      二、组织架构：下设四类栏目
                    </p>
                    <p>
                      <span class="spanPos">①</span>员工管理：用于注册并管理园区内部员工登入该软件的账号，并依据职位管理设定账号类型。<br/>
                      <span class="spanPos">②</span>员工通讯录：展示园区内员工联系方式等基础信息。<br/>
                      <span class="spanPos">③</span>职位管理：依据园区管理需求和软件设计特点，建立不同线上职位，设定不同职位访问软件内容权限的差异。<br/>
                      <span class="spanPos">④</span>权限管理：建立并管理访问该软件不同模块和功能的url权限。
                    </p>
                    <p style="font-weight: 700;">
                      三、党群党建：发布并管理党建文章
                    </p>
                    <p style="font-weight: 700;">
                      四、财务模块：主要管理园区财务
                    </p>
                    <p>
                      <span class="spanPos">①</span>核销模块：对依据园区管理和系统产生的账单进行核销。<br/>
                      <span class="spanPos">②</span>物业费财务报表：园区住户缴纳物业费产生的物业费订单详情。<br/>
                      <span class="spanPos">③</span>物业费明细报表：对物业费财务报表的详细展示。<br/>
                      <span class="spanPos">④</span>退补费工单：因园区住房面积变更，产生的物业费退补详细记录。<br/>
                      <span class="spanPos">⑤</span>物业费预缴报表：园区住户提前缴纳的物业费订单详情。<br/>
                      <span class="spanPos">⑥</span>物业费预缴明细表：对物业费预缴报表的详细补充。<br/>
                      <span class="spanPos">⑦</span>物业费催缴报表：园区住户欠缴物业费订单详情。<br/>
                      <span class="spanPos">⑧</span>物业费催缴明细表：对物业费催缴报表的详细补充说明。<br/>
                      <span class="spanPos">⑨</span>收费统计：所有园区账户余额表、缴费统计表，小区两率统计表三表汇总表。
                    </p>
                    <p style="font-weight: 700;">
                      五、园区管理：园区楼宇、住房、公告，业主等园区管理信息
                    </p>
                    <p>
                      <span class="spanPos">①</span>园区分组：设置园区分组组名。<br/>
                      <span class="spanPos">②</span>房产管理：根据实际园区住宅，建立对应线上房产信息，并依据国家标准和园区条例，设定物业费标准。<br/>
                      <span class="spanPos">③</span>园区管理：根据实际园区信息，建立对应线上园区信息。<br/>
                      <span class="spanPos">④</span>房产认证管理：业主通过线上注册，认证房产请求后在此栏目进行核对。<br/>
                      <span class="spanPos">⑤</span>业主管理：园区业主登入推广app，小程序的注册账户信息，在此栏目管理业主的积分和房产对应关系。<br/>
                      <span class="spanPos">⑥</span>配送员管理：此栏目主要展示园区内配送员工的账号信息。<br/>
                      <span class="spanPos">⑦</span>公告管理：发布并管理面向园区员工或业主的公告信息。<br/>
                      <span class="spanPos">⑧</span>广告管理：发布并管理app、小程序上的广告信息。
                    </p>
                    <p style="font-weight: 700;">
                      六、系统设置：辅助园区管理和软件使用
                    </p>
                    <p class="mb-0">
                      <span class="spanPos">①</span>系统参数设置：建立辅助软件展示和使用的公共参数。<br/>
                      <span class="spanPos">②</span>收款账号设置：园区财务收款账号。
                    </p>
                  </v-card-text>
                </v-card>
              </v-tab-item>
            </v-tabs>
          </v-card>
  </v-dialog>
</template>

<script>
import { mapState,mapMutations } from "vuex";
export default{
  data:()=>({
     dialog:false,

     settingTools:false,
     settingToolsType:{
        scrollUp:false,
        scrollDown:false,
        hide:false,
        cutPicture:false,
     },

     latestVersion:true,
     oldVersion:"1.0.0",
     newVersion:"2.0.0",
  }),
  computed:{
    ...mapState({
        tools:state=>state.set.tools,//只能是这种写法
        toolsType:state=>state.set.toolsType,//显示的工具按钮
    }),
  },
  props:{
     pDialog:{
       default:false,
     },
  },
  watch:{
     pDialog(val){
       if(val){
         this.dialog = true
       }
     },
     dialog(val){
       if(!val){
         this.$emit("close")
       }
     },
     tools(val){
       this.settingTools = val;
     },
     toolsType:{
       deep:true,
       handler:function(val, oldval){
         for(var i in val){
           this.settingToolsType[i] = val[i]
         }
       }
     }
  },
  created() {
    this.initFn()
  },
  methods:{
      ...mapMutations([
        "setToolsType",
        "setTools",
      ]),
      //更新升级
      uploadFN(){

      },

      initFn(){
         this.settingTools = this.tools;

         this.settingToolsTyp = [];
         for(var k in this.toolsType){
           this.settingToolsType[k] = this.toolsType[k]
         }
      },
      closeFn(){
        this.dialog = false
      },
      saveFn(){
         this.setTools(this.settingTools)
         var arrTrue = [];
         var arrFalse = [];
         for(let i in this.settingToolsType){
           if(this.settingToolsType[i]){
             arrTrue.push(i)
           }else{
             arrFalse.push(i)
           }
         }
         this.setToolsType([arrTrue,arrFalse])
         this.dialog = false;
      }
  }
}

</script>

<style>
  .badgeDiv{
    position:absolute;
    top:10px;
    left:108px;
    width:8px;
    background-color: red;
    height:8px;
    border-radius: 50%;
  }
/* .versionTab span span{
  bottom: calc(100% - 19px)!important;
  left: calc(100% - 20px)!important;
} */

.spanPos{
  font-size:18px;
  font-weight: 400;
}
</style>
